import $ from './library/jquery.js';
import cookie from './library/cookie.js';
$(function() {
    let shop = cookie.get('shop');
    let flag, flag2 = true;
    if (shop != 'null' && shop) {

        flag2 = false;
        if (shop === '[]') { flag2 = true }
        shop = JSON.parse(shop);
        let idList = shop.map(el => el.id).join();

        $.ajax({
            type: "get",
            url: "../../interface/getItems.php",
            data: { idList },
            dataType: "json",
            success: function(res) {
                let temp = '';
                res.forEach(elm => {
                    let picture = JSON.parse(elm.picture);

                    // 让ajax中获得的数据结果的id与cookie中的id 一一对应

                    // 从购物车cookie数据中筛选当前遍历的数据

                    let current = shop.filter(val => val.id == elm.id);
                    temp += `<div class="prod">
                <div>
                    <div class="shop">
                        <input type="checkbox">店铺：<a href="#">晨量数码配件专营 
                            <span></span></a>
                    </div>
                    <div class="shop-box">
                        <input type="checkbox">
                        <img src="${picture[0].src}" alt="">
                        <span><a href="./goods.html?id=${elm.id}">${elm.title}</a>
                            <a href="#"><img src="../img/way.png" alt=""></a>
                            
                        </span>
                        <span class="detial">
                            <i>颜色分类：</i><em>${current[0].color}</em><br>
                            <i>套餐类型：</i><em>${current[0].meal}</em>
                        </span>
                        <span class="single">
                            ￥<i>${elm.pr2}</i>
                        </span>
                        <span class="num">
                            <i class="del hov">-</i>
                            <input type="text" value="${current[0].num}">
                            <em class="inc hov" data-num=${elm.num}>+</em>
                        </span>
                        <span class="sum">
                        ￥<i>${(elm.pr2 * current[0].num).toFixed(2)}</i>
                        
                        </span>
                        <span>
                        <a href="javascript:;" class="dele" data-id="${elm.id}">删除</a>
                        </span>
                      </div>
                    </div>
                </div>`;
                });

                $('.sure').on('click', function() {


                    cookie.set('shop', JSON.stringify(flag), 1); // 将id不为被点击元素id的剩余元素从新写入cookie
                    //写入数据库
                    change();
                    location.reload();


                });


                $('main>.account').before(temp);
                $('.dele').on('click', function() {
                    flag = shop.filter(el => el.id != $(this).attr('data-id'));
                    $('.box-cover').css('display', 'block');
                    $('.del-sure').css('display', 'block');

                });
                $('.cancel').on('click', function() {
                    $('.box-cover').css('display', 'none');
                    $('.del-sure').css('display', 'none');
                });
                $('.not').on('click', function() {
                    $('.box-cover').css('display', 'none');
                    $('.del-sure').css('display', 'none');
                });

                //数量
                $('.del').on('click', function() {
                    let id = $(this).parent().siblings('span:last-child').children('a').attr('data-id');
                    if ($(this).siblings('input').val() <= 1) {
                        $(this).siblings('input').val(1);
                        $(this).css('cursor', 'no-drop');
                        $(this).css('color', '#ccc');
                        $(this).removeClass('hov');
                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));

                    } else {
                        $(this).css('cursor', 'pointer');
                        $(this).siblings('input').val($(this).siblings('input').val() - 1);
                        $(this).css('color', '#333');
                        $(this).addClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    }
                    if ($(this).siblings('input').val() <= 1) {
                        $(this).siblings('input').val(1);
                        $(this).css('cursor', 'no-drop');
                        $(this).css('color', '#ccc');
                        $(this).removeClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    }
                    $(this).siblings('.inc').css('cursor', 'pointer');
                    $(this).siblings('.inc').css('color', '#333');
                    $(this).siblings('.inc').addClass('hov');

                    $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    let arr = $('.shop-box>input:checked').siblings('.sum').children('i'),
                        sum = 0;

                    arr.each(function(i, elm) {
                        sum += +elm.innerHTML;
                    });
                    $('.acc-sum').html(sum.toFixed(2));
                    $('.ckd span').html(sum.toFixed(2));
                    addItem(id, $(this).parent().siblings('.single').children('i').html(), $(this).siblings('input').val(), $(this).parent().siblings('.detial').children('em:nth-of-type(1)').html(), $(this).parent().siblings('.detial').children('em:nth-of-type(2)').html());




                    //写入数据库
                    change();
                });
                $('.inc').on('click', function() {

                    let id = $(this).parent().siblings('span:last-child').children('a').attr('data-id');
                    if (+$(this).siblings('input').val() >= +$(this).attr('data-num')) {
                        $(this).siblings('input').val(+$(this).attr('data-num'));
                        $(this).css('cursor', 'no-drop');
                        $(this).css('color', '#ccc');
                        $(this).removeClass('hov');
                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));

                    } else {
                        $(this).css('cursor', 'pointer');
                        $(this).siblings('input').val(+$(this).siblings('input').val() + 1);
                        $(this).css('color', '#333');
                        $(this).addClass('hov');


                        //sum
                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    }
                    if (+$(this).siblings('input').val() >= $(this).attr('data-num')) {
                        $(this).siblings('input').val(+$(this).attr('data-num'));
                        $(this).css('cursor', 'no-drop');
                        $(this).css('color', '#ccc');
                        $(this).removeClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    }
                    $(this).siblings('.del').css('cursor', 'pointer');
                    $(this).siblings('.del').css('color', '#333');
                    $(this).siblings('.del').addClass('hov');
                    $(this).parent().siblings('.sum').children('i').html((+$(this).siblings('input').val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    let arr = $('.shop-box>input:checked').siblings('.sum').children('i'),
                        sum = 0;

                    arr.each(function(i, elm) {
                        sum += +elm.innerHTML;
                    });
                    $('.acc-sum').html(sum.toFixed(2));

                    $('.ckd span').html(sum.toFixed(2));
                    addItem(id, $(this).parent().siblings('.single').children('i').html(), $(this).siblings('input').val(), $(this).parent().siblings('.detial').children('em:nth-of-type(1)').html(), $(this).parent().siblings('.detial').children('em:nth-of-type(2)').html());
                    //写入数据库
                    change();
                });
                $('.del+input').on('input', function() {

                    let id = $(this).parent().siblings('span:last-child').children('a').attr('data-id');
                    if ($(this).val() <= 1) {
                        $(this).val(1);
                        $(this).siblings('i').css('cursor', 'no-drop');
                        $(this).siblings('i').css('color', '#ccc');
                        $(this).siblings('i').removeClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                        $(this).siblings('.inc').css('cursor', 'pointer');
                        $(this).siblings('.inc').css('color', '#333');
                        $(this).siblings('.inc').addClass('hov');

                    } else if ($(this).val() >= +$(this).siblings('em').attr('data-num')) {
                        $(this).val(+$(this).siblings('em').attr('data-num'));
                        $(this).siblings('em').css('cursor', 'no-drop');
                        $(this).siblings('em').css('color', '#ccc');
                        $(this).siblings('em').removeClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                        $(this).siblings('.del').css('cursor', 'pointer');
                        $(this).siblings('.del').css('color', '#333');
                        $(this).siblings('.del').addClass('hov');
                    } else {
                        $(this).siblings('.del').css('cursor', 'pointer');
                        $(this).siblings('.del').css('color', '#333');
                        $(this).siblings('.del').addClass('hov');
                        $(this).siblings('.inc').css('cursor', 'pointer');
                        $(this).siblings('.inc').css('color', '#333');
                        $(this).siblings('.inc').addClass('hov');

                        $(this).parent().siblings('.sum').children('i').html((+$(this).val() * +$(this).parent().siblings('.single').children('i').html()).toFixed(2));
                    }
                    let arr = $('.shop-box>input:checked').siblings('.sum').children('i'),
                        sum = 0;

                    arr.each(function(i, elm) {
                        sum += +elm.innerHTML;
                    });
                    $('.acc-sum').html(sum.toFixed(2));

                    $('.ckd span').html(sum.toFixed(2));
                    addItem(id, $(this).parent().siblings('.single').children('i').html(), $(this).val(), $(this).parent().siblings('.detial').children('em:nth-of-type(1)').html(), $(this).parent().siblings('.detial').children('em:nth-of-type(2)').html());


                    //写入数据库
                    change();
                });


                //全选2
                $('.shop>input').on('click', function() {

                    if ($(this).prop('checked')) {
                        $(this).parent().siblings('.shop-box').children('input').prop('checked', true);
                    } else {
                        $(this).parent().siblings('.shop-box').children('input').prop('checked', false);
                    }
                    $('.shop-box>input:checked').parent().css('background-color', '#fff8e1');
                    $('.shop-box>input:not(:checked)').parent().css('background-color', 'white');
                })
                $('.shop-box>input').on('click', function() {

                    if ($(this).siblings('input').length + 1 == $(this).parent().children('input:checked').length) {
                        $(this).parent().siblings('.shop').children('input').prop('checked', true);
                    } else {
                        $(this).parent().siblings('.shop').children('input').prop('checked', false);
                    }
                    $('.shop-box>input:checked').parent().css('background-color', '#fff8e1');
                    $('.shop-box>input:not(:checked)').parent().css('background-color', 'white');
                })

                //结算
                $('input').on('click', function() {
                    let arr = $('.shop-box>input:checked').siblings('.sum').children('i'),
                        sum = 0;

                    arr.each(function(i, elm) {
                        sum += +elm.innerHTML;
                    });
                    $('.acc-num').html($('.shop-box>input:checked').length);
                    $('.acc-sum').html(sum.toFixed(2));

                    $('.ckd span').html(sum.toFixed(2));
                    if ((+$('.acc-num').html()) != 0) {
                        $('.finish').css('background-color', '#f40');
                        $('.ckd>a').css('background-color', '#f40');
                        $('.finish').css('cursor', 'pointer');
                        $('.ckd>a').css('cursor', 'pointer');
                    } else {
                        $('.finish').css('background-color', '#B0B0B0');
                        $('.finish').css('cursor', 'not-allowed');
                        $('.ckd>a').css('background-color', '#B0B0B0');
                        $('.ckd>a').css('cursor', 'not-allowed');
                    }
                })

                //全部商品

                $('.s1>i').html($('main').children().length - 4);

            }
        });






    }
    //全选
    $('.all-check').on('click', function() {
            if ($(this).prop('checked')) {
                $('main input:checkbox').prop('checked', true);
                $('.all-check').prop('checked', true);

            } else {
                $('main input:checkbox').prop('checked', false);
                $('.all-check').prop('checked', false);
            }
            $('.shop-box>input:checked').parent().css('background-color', '#fff8e1');
            $('.shop-box>input:not(:checked)').parent().css('background-color', 'white');
        })
        //左上角
    if (cookie.get('username')) {

        $('.logtp').html(cookie.get('username'));
        $('.logtp').attr('href', 'javascript:;');
        $('.logtp').css('color', '#6c6c6c!important');
        $('.exit').css('display', 'block');
    } else {
        $('.logtp').html('亲，请登录 ');
        $('.logtp').attr('href', './login.html');
        $('.logtp').css('color', '#f22e00');
        $('.exit').css('display', 'none');

    }
    //退出登录
    $('.exit').on('click', function() {
        let username = cookie.get('username'),
            car = JSON.stringify(cookie.get('shop'));
        $.ajax({
            type: "get",
            url: "../../interface/exit.php?username=" + username + "&car=" + car + "",

            success: function(res) {
                // console.log(res);
                cookie.remove('username');
                cookie.remove('shop');
                cookie.remove('isLogined');
                location.href = './login.html';

            }
        });
    })

    //购物车数量
    if (cookie.get('shop') != 'null' && shop) { $('.carnum').html(JSON.parse(cookie.get('shop')).length); }

    //购物车为空

    if ((($('main').children().length - 4) == 0) && flag2 == true) {
        $('.empty').css('display', 'block');
        $('.account').css('display', 'none');
        $('.all').css('display', 'none');

    } else {
        $('.empty').css('display', 'none');
        $('.account').css('display', 'block');
        $('.all').css('display', 'block');
    }


})




function addItem(id, price, num, color, meal) {
    let shop = cookie.get('shop');
    let product = {
        id,
        price,
        num,
        color,
        meal
    };

    if (shop) {
        shop = JSON.parse(shop);

        // 判断当前的商品id在cookie数据中是否存在
        if (shop.some(el => el.id === id)) {
            shop.forEach(elm => {
                elm.id === id ? elm.num = num : null;
            });
        } else {
            shop.push(product);
        }


    } else { // 没有存cookie的情况
        shop = []; // 初始化成数组
        shop.push(product);
    }

    cookie.set('shop', JSON.stringify(shop), 1);


}

function change() {
    let username = cookie.get('username'),
        car = JSON.stringify(cookie.get('shop'));
    $.ajax({
        type: "get",
        url: "../../interface/exit.php?username=" + username + "&car=" + car + "",

        success: function(res) {
            // console.log(res);


        }
    });
}